<template>
	<view id="onlineSing" class="onlineSing">
		<!-- <view class="btn_text_wrap">
			<view class="btn_text">
				线上报名
				<text class="storng_text">立省2.3</text>万
			</view>
		</view> -->
		<uni-popup ref="popup" type="bottom" maxHeight="100vh" width="100vw">
			<div>
				<image class="closePopup" :src="`${constant.imgUrl}common/close.png`" @click="closePopup"></image>
				<view class="sign_wrap">
					<view class="sign_top_img"></view>
					<view class="sign_body">
						<!-- <view class="sign_title">
							【{{ userInfo.nick_name }}】从业{{ userInfo.working_years }}年以来
							<text class="highlight_text">最大优惠活动</text>
							现在报名，给你超值装修服务！
						</view> -->
						<view class="money_wrap">
							<view class="money_list_wrap">
								<view class="money_list" v-for="item in dataList" :key="item.id">
									<view>
										<!-- view>{{item.serviceName}}</！view>-->
										<text class="sub_text">{{item.serviceInfo}}</text>
									</view>
									<!-- view class="yellow_text">￥{{item.servicePrice}}</!-->
								</view>
							</view>
							<view class="money_total" v-if="cutDownPrice">
								<view>线上报名免费获取装修设计方案</view>
								<!-- view>
									￥
									<text class="big_text">{{cutDownPrice}}</text>
									万
								</!-->
							</view>
						</view>

						<!-- <view>
							现在报名，立刻为您
							<text class="highlight_text">省下￥{{cutDownPrice}}万元</text>
							装修费用！
						</view> -->

						<view class="sign_content">
							<view class="sign_body_top">
								<!-- <view class="sign_body_tit">报名成功，用户昵称 将立即为您：</view>
								<view>
									<view class="sign_body_txt">1. 安排专业团队，为您提供专属装修服务；</view>
									<view class="sign_body_txt">2. 以短信形式将报名成功信息发至您的手机，凭短信即可到店领取优惠，享受线上报名超值优惠！</view>
								</view> -->

								<!--  #ifdef H5 -->
								<view class="sign_body_input">
									<input :disabled="isReadonly" type="text" placeholder="请输入手机号码" v-model="inpData.mobile">
								</view>
								<view class="sign_body_input">
									<input :disabled="isReadonly" type="text" placeholder="请问我们该如何称呼您" v-model="inpData.name">
								</view>
								<view class="sign_btn" @click="signBtn">立即预约</view>
								<!--  #endif -->

								<!--  #ifdef MP-WEIXIN -->
								<get-phone-number @cbFn="prebook" dataSource="signGift">
									<view class="sign_btn">{{btnTxt}}</view>
								</get-phone-number>
								<!--  #endif -->

								<view class="prompt_mark" v-if="isOpen">
									<swiper class="prompt_scroll_wrap" :autoplay="false" :interval="1000" duration="1000" :circular="true"
											:vertical="true" :skip-hidden-item-layout="true"> <!--autoplay为true时，循环滚动 shijia2020.09.04-->
										<swiper-item class="list_item_wrap" v-for="(item,index)  in scroll_data" :key="index">
											<view>
												<!--“{{ item.name }} 预算
												<text style="text-decoration: line-through">{{ item.total }}万</text>
												报价{{ item.real }}万
												<text style="color: #fff950">节省了{{ item.province }}万</text>”
												-->
												稍后设计师将会电话联系你，沟通具体的服务细节。
											</view>
										</swiper-item>
									</swiper>
								</view>

							</view>
							<!--
							<view class="sign_body_bottom">-->
								<!-- <view class="user_list_blo">
									<view class="user_list" v-for="(item, index) in 5" :key="item.id">
										<image v-if="index < 4"></image>
										<image v-if="index == 4" :src="`${constant.imgUrl}design/more.png`"></image>
									</view>
								</view> -->

								<!---#ifdef MP-WEIXIN-->
								<!--<app-user-attr :maxLength="4"></app-user-attr>-->
								<!---#endif-->
								<!--
								<view class="user_list_prompt">
									已有
									<text class="strong_text">28</text>
									名业主获得了优惠装修礼包
								</view>
							</view>-->
						</view>

					</view>
						<view class="user_wrap">
							<view class="user_attr_body">
								<image class="user_attr" :src="`${userInfo.user_picture}?x-oss-process=image/resize,m_fill,h_180,w_180`" alt="头像"></image>
								<image class="user_mark"
									   :src="`${`${constant.imgUrl}common/personal-authenticate.png`}?x-oss-process=image/resize,m_fill,h_51,w_150`"></image>
							</view>
							<view class="user_info">
								<view class="user_name">{{ userInfo.nick_name }}</view>
								<view class="service_text">
									<text style="color: #EE6501" v-if="userInfo.count_data">已服务&nbsp;{{
										userInfo.count_data.totalVistor }}&nbsp;名业主&nbsp;
									</text>
									<!--<text class="separate_text">|</text>
									<text>&nbsp;{{ userInfo.working_years }}&nbsp;年从业经验</text>-->
								</view>
								<view class="mark_list_body">
									<view class="mark_list">设计方案</view>
									<view class="mark_list">&nbsp;&nbsp;|&nbsp;&nbsp;全屋家具</view>
								</view>
							</view>
						</view>
					<!-- <view class="plink_body"></view> -->
				</view>
			</div>
		</uni-popup>
	</view>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import AppUserAttr from '@/pages/components/appUserAttr'
import getPhoneNumber from '@/pages/components/getPhoneNumber'
import { verifiPhone } from '@/utils/common'

import { addCart } from '@/api/cart'
// import { getBasicUser } from '@/utils/auth'

export default {
	name: 'online-sign',
	props: {
		dataList: {
			type: Array,
			default: () => []
		},
		isReadonly: {
			type: Boolean,
			default: false
		},
		owner_user_id: [Number, String]
	},

	components: {
		getPhoneNumber,
		uniPopup,
		// #ifdef MP-WEIXIN
		AppUserAttr
		// #endif
	},
	data() {
		return {
			constant: this.$constant,
			isOpen: false,
			btnTxt: '立即报名',
			inpData: {
				mobile: '',
				name: ''
			},
			preferential_data: [],
			scroll_data: [
				{
					name: '黄先生',
					total: 15,
					real: 12,
					province: 3
				},
				{
					name: '江小姐',
					total: 20,
					real: 16,
					province: 4
				},
				{
					name: '李先生',
					total: 28,
					real: 25,
					province: 3
				},
				{
					name: '涂小姐',
					total: 8,
					real: 7,
					province: 1
				},
				{
					name: '刘先生',
					total: 19,
					real: 17,
					province: 2
				}
			],
			scroll_option: {
				step: 1,
				limitMoveNum: 1,
				openTouch: false,
				waitTime: 30,
				direction: 1
			},
			currentQuery: {}
		}
	},
	created() {
		// getBasicUser(this.owner_user_id)
	},
	computed: {
		cutDownPrice() {
			const prices = this.dataList.map((item) => {
				return item.servicePrice
			})
			let total = 0
			for (let i = 0; i < prices.length; i++) {
				total += parseInt(prices[i])
			}
			return total ? total / 10000 : 0
		},
		...mapGetters({ userInfo: 'getBasicUser' })
		// ...mapState({ userInfo: state => state.user.basicUser })
	},
	methods: {
		prebook(pageInfo) {
			const mobile = uni.getStorageSync('wxMobile')
			if (!mobile || this.isReadonly) {
				return
			}
			const params = {
				mobile_phone: mobile,
				prebook_source: '线上报名',
				owner_user_id: this.currentQuery.owner_user_id || this.owner_user_id
			}
			if (this.inpData.name) {
				params.name = this.inpData.name
			}
			if (this.currentQuery.share_user_id) {
				params.share_user_id = this.currentQuery.share_user_id
			}
			if (this.currentQuery.p_share_user_id) {
				params.p_share_user_id = this.currentQuery.p_share_user_id
			}
			addCart(params).then(res => {
				uni.showToast({
					title: '提交成功',
					icon: 'success',
					complete: () => {
						if (pageInfo === 'signGift') {
							setTimeout(() => {
								this.closePopup()
							}, 2500)
						}
					}
				})
				this.btnTxt = '报名成功'
				this.$eventBus.$emit('BusOnlineSign', res)
			})
		},
		signBtn() {
			if (this.isReadonly) {
				return
			}
			const data = this.inpData
			if (data.mobile == '') {
				this.$toast('请输入手机号码！')
				return
			}
			if (!verifiPhone(data.mobile)) {
				this.$toast('请输入正确的手机号码！')
				return
			}
			if (data.name == '') {
				this.$toast('请输入名字！')
				return
			}

			const params = {
				mobile_phone: data.mobile,
				name: data.name,
				prebook_source: '线上报名',
				owner_user_id: this.currentQuery.owner_user_id || this.owner_user_id
			}
			if (this.currentQuery.share_user_id) {
				params.share_user_id = this.currentQuery.share_user_id
			}
			if (this.currentQuery.p_share_user_id) {
				params.p_share_user_id = this.currentQuery.p_share_user_id
			}
			addCart(params).then(res => {
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				this.inpData = {
					mobile: '',
					name: ''
				}
				console.log(res)
				this.$eventBus.$emit('BusOnlineSign', res)
			})
		},
		openPopup() {
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
			// const wxMobile = uni.getStorageSync('wxMobile') || ''
			// this.inpData.mobile = wxMobile
			this.$refs.popup.open()
			this.isOpen = true
			// #ifdef MP-WEIXIN
			if (this.$util.isEmpty(this.currentQuery.owner_user_id) || this.currentQuery.owner_user_id == uni.getStorageSync('user_id')) {
				return
			}
			this.prebook()
			// #endif
		},
		closePopup() {
			this.$refs.popup.close()
			this.isOpen = false
		}
	}
}
</script>

<style lang="scss">
	.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box {
		max-height: 2000px !important;
	}
</style>

<style scoped lang="scss">

	.designs {
		width: 100%;
		height: 100%;
		//   float: left;
	}

	.onlineSing {
		-webkit-overflow-scrolling: touch;
		font-size: 30px;

		.yellow_text {
			// color: #ff6900;
			color: #FF3E45;
		}

		.highlight_text {
			color: #eb1017;
			position: relative;
			z-index: 4;
		}

		.highlight_text:after {
			content: '';
			width: 100%;
			height: 12px;
			position: absolute;
			left: 0;
			bottom: 4px;
			background-color: #f5b3b4;
			opacity: 0.4;
		}

		.strong_text {
			color: #333;
			font-size: 34px;
			padding: 0 5px;
		}

		.big_text {
			font-size: 40px;
		}

		.closePopup {
			position: absolute;
			right: 39px;
			top: 39px;
			width: 50px;
			height: 50px;
			z-index: 2;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.modules {
			// top: 83%;
			height: 86%;
			overflow: hidden;
		}

		.sign_wrap {
			height: 80vh;
			overflow-y: auto;
			background-color: #fcfcfc;
			border-radius: 20px 20px 0 0;

			.sign_top_img {
				width: 100%;
				// height: 280px;
				height: 251px;
				background: url($imgUrl + 'design/coupon.png');
				// background-size: 100% 100%;
				background-size: cover;
				margin-top: 0;
			}

			.sign_body {
				padding: 30px;
				// background-color: #fcfcfc;
				 background:linear-gradient(90deg,rgba(249,92,97,1),rgba(255,63,70,1));

				& > div {
					margin-top: 20px;
				}

				& > view {
					margin-top: 20px;
				}

				.sign_title {
					font-size: 30px;
				}

				.money_wrap {
					// box-shadow: 0 2px 10px #ededed;

					.money_list_wrap {
						//padding: 0 30px;
						//border-radius: 10px;
						// background-color: #fff;
						//text-align: left;

						.money_list {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-left: 30px;
							//border-top: 2px solid #ddd;
							//font-size: 30px;

							.sub_text {
								color: white;
								font-size: 30px;
								margin-top: 9px;
							}
						}

						.money_list:first-child {
							border-top: 0;
						}
					}

					.money_total {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color:white;
						//color: #FF3E45;
						padding: 20px 30px;
						//padding: 40px 30px 39px;
						//background-color: #ffefe3;
						//view {
							//line-height: 1;
						}
					}
				}

				.sign_content {
					color: #fff;
					text-align: left;
					font-size: 28px;
					// background: url('https://wximg.meijiabang.com/hkds/miniapp/images/design/sign-up.png');
					background-size: 100% 100%;
					// box-shadow: 0 2px 10px #ededed;
					// padding: 1px 20px 10px;
					padding-top: 1px;

					.sign_body_top {
						padding: 0 10px 10px;
						// margin-bottom: 10px;
						& > div {
							margin-top: 20px;
						}

						& > view {
							margin-top: 20px;
						}

						.sign_body_tit {
							margin-bottom: 20px;
						}

						.sign_body_txt {
							line-height: 1.3;
						}

						.sign_body_input {
							input {
								width: calc(100% - 30px);
								height: 90px;
								border-radius: 40px;
								padding-left: 30px;
								outline: none;
								-webkit-appearance: none;
								border: none;
								font-size: 28px;
								color: #333;
								background-color: #fff;
							}
						}

						.sign_btn {
							margin-top: 70px;
							width: 100%;
							color: #702109;
							text-align: center;
							background: linear-gradient(to right, #ffec6e, #ffd11b);
							height: 90px;
							line-height: 90px;
							border-radius: 40px;
							font-size: 36px;
						}

						.prompt_mark {
							// margin-left: 60px;
							margin-bottom: 20px;

							.prompt_scroll_wrap {
								height: 80px;
								overflow: hidden;
								swiper-item {
									> view {
										text-align: center;
									}
								}
							}
						}
					}

					.sign_body_bottom {
						color: #999;
						display: flex;
						align-items: center;
						justify-content: space-between;
						// margin: 20px 0 10px;
						  background:linear-gradient(90deg,rgba(249,92,97,1),rgba(255,63,70,1));
                    padding: 20px 20px 21px;
						position: relative;

						.user_list_blo {
							display: flex;
							align-items: center;

							.user_list {
								position: relative;
								width: 50px;
								height: 50px;

								img {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

							.user_list:nth-child(1) {
								z-index: 5;
							}

							.user_list:nth-child(2) {
								left: -14px;
								z-index: 4;
							}

							.user_list:nth-child(3) {
								// position: relative;
								left: -28px;
								z-index: 3;
							}

							.user_list:nth-child(4) {
								// position: relative;
								left: -42px;
								z-index: 2;
							}

							.user_list:nth-child(5) {
								// position: relative;
								left: -56px;
								z-index: 1;
							}
						}

						.user_list_prompt {
							position: absolute;
							// right: 0;
							right: 16px;
							color: #fff;
							 .strong_text {
                            	color: #FFC921
                        	}
						}
					}
				}

			}
			.user_wrap {
					display: flex;
					// align-items: flex-end;
					text-align: left;
					padding: 40px 40px 38px;
					.user_attr_body {
						position: relative;
						width: 120px;
						height: 120px;
						background-color: #eee;
						border-radius: 50%;

						.user_attr {
							width: 120px;
							height: 120px;
							border-radius: 50%;
						}

						.user_mark {
							width: 100px;
							height: 34px;
							position: absolute;
							left: 10px;
							// bottom: 0px;
							bottom: -12px;

							img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.user_info {
						margin-left: 30px;

						& > div {
							// margin-top: 10px;
						}

						& > view {
							// margin-top: 10px;
						}

						.mark_list_body {
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							margin-top: 20px;

							.mark_list {
								font-size: 24px;
								color: #999;
								//padding: 0 10px;
								//border: 2px solid #ddd;
								border-radius: 4px;
								margin-right: 10px;
							}
						}

						.user_name {
							font-size: 36px;
							font-weight: 600;
							line-height: 1;
						}

						.service_text {
							// font-size: 30px;
							font-size: 24px;
							margin-top: 20px;

							.separate_text {
								margin: 0 10px;
							}
						}
					}
				}
		}
</style>
